---
name: useNetworkState
rank: 6
tagline: Monitor and adapt to network conditions seamlessly with useNetworkState.
sandboxId: usenetworkstate-k4t3qt
previewHeight: 400px
relatedHooks:
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useNetworkState React hook delivers real-time insights about the network
  status in your application, helping to adapt app behavior to varying
  connectivity conditions. It offers up-to-date snapshots of the network state,
  such as online/offline status, connection speed, and type. Through its use,
  you can respond effectively to network changes, fostering a seamless user
  experience even under unstable or varying connectivity. Please note, this hook
  is intended for client-side use only.
</HookDescription>

<div class="reference">
  ### Return Value

  The `useNetworkState` hook returns an object representing the current network state with the following properties:

  <div class="table-container">
  | Name          | Type    | Description                                                                                                                                                                                          |
  | ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | online        | boolean | Indicates whether the browser is online or offline.                                                                                                                                                  |
  | downlink      | number  | The effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.                                                                                 |
  | downlinkMax   | number  | The maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.                                                                                                 |
  | effectiveType | string  | The effective type of the connection for general web browsing purposes (either 'slow-2g', '2g', '3g', or '4g').                                                                                      |
  | rtt           | number  | The estimated round-trip latency of the connection, in milliseconds.                                                                                                                                 |
  | saveData      | boolean | Whether the user has requested a reduced data usage mode from the user agent.                                                                                                                        |
  | type          | string  | The type of connection a device is using to communicate with the network. It could be one of the following values: 'bluetooth', 'cellular', 'ethernet', 'none', 'wifi', 'wimax', 'other', 'unknown'. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useNetworkState } from "@uidotdev/usehooks";

export default function App() {
  const network = useNetworkState();

  return (
    <section>
      <h1>useNetworkState</h1>
      <table>
        <tbody>
          {Object.keys(network).map((key) => {
            return (
              <tr key={key} className={key}>
                <th>{key}</th>
                <td>{`${network[key]}`}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>
